<template>
  <!--    <codemirror v-model="code"-->
  <!--                placeholder="Code goes here..."-->
  <!--                :style="{ height:'100%'}"-->
  <!--                :autofocus="true"-->
  <!--                :tabSize="21"-->
  <!--                :extensions="extensions">-->
  <!--    </codemirror>-->
  <codemirror v-model="code" :options="options" class="code-mirror">
  </codemirror>
</template>

<script>
import { codemirror } from "vue-codemirror";

export default {
  name: "ConsoleComponent",
  data() {
    return {
      // code:`${`[${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}]`} 启动完毕`,
      options: {
        line: true,
        theme: "eclipse",
        tabSize: 4,
        indentUnit: 2,
        readOnly: true,
        autoRefresh: true,
        lineNumbers: true,
        styleActiveLine: true,
        viewportMargin: Infinity,
        showCursorWhenSelecting: true,
        mode: "text/javascript",
      },
    };
  },
  components: {
    codemirror,
  },
  computed: {
    code: {
      get: function () {
        return this.$store.state.consolePlat.code;
      },
      set: function (val) {
        // console.log(val)
      },
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .CodeMirror {
  height: 70vh;
}
</style>
